<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import { getFormRules } from "../utils/rule";
import { FormProps1 } from "../utils/fastTypes";
import { usePublicHooks } from "../../hooks";
import type { UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { getConfig } from "@/config";

const props = withDefaults(defineProps<FormProps1>(), {
  formInline: () => ({
    Id: 0,
    Name: "",
    Contact: "",
    Tel: "",
    ChannelCount: 1,
    Users: [
      {
        Code1: "",
        Name: ""
      }
    ]
  }),
  title: "" // 添加title属性的默认值
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 根据当前是否是修改表单，决定是否传递excludeId
const formRules = computed(() => {
  const isEdit = props.title === "修改";
  const excludeId = isEdit ? props.formInline.Id : undefined;
  return getFormRules(excludeId);
});

// 添加用户组
const addUser = () => {
  if (!newFormInline.value.Users) {
    newFormInline.value.Users = [];
  }
  if (newFormInline.value.Users.length < 10) {
    newFormInline.value.Users.push({
      Code1: "",
      Name: ""
    });
  } else {
    ElMessage.warning("最多只能添加10组用户");
  }
};

// 删除用户组
const removeUser = (index: number) => {
  if (!newFormInline.value.Users || newFormInline.value.Users.length <= 1) {
    ElMessage.warning("至少需要保留一组用户");
    return;
  }
  newFormInline.value.Users.splice(index, 1);
};

function getRef() {
  return ruleFormRef.value;
}
onMounted(() => {
  console.log(props.formInline);
});
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
    class="w-full"
  >
    <el-form-item label="名称" prop="Name">
      <el-input v-model="newFormInline.Name" placeholder="请输入租户名称" />
    </el-form-item>
    <el-form-item label="联系人" prop="Contact">
      <el-input v-model="newFormInline.Contact" placeholder="请输入联系人" />
    </el-form-item>
    <el-form-item label="电话" prop="Tel">
      <el-input
        v-model="newFormInline.Tel"
        placeholder="请输入联系电话"
        type="number"
      />
    </el-form-item>
    <el-form-item label="频道数量" prop="ChannelCount">
      <el-input
        v-model="newFormInline.ChannelCount"
        placeholder="请输入频道数量"
        type="number"
        :max="20"
        :min="3"
      />
    </el-form-item>
    <el-form-item>
      <template #label>
        <span>用户</span>
        <el-button
          type="primary"
          :icon="Plus"
          size="small"
          circle
          style="margin-left: 8px"
          :disabled="newFormInline.Users?.length >= 10"
          @click="addUser"
        />
      </template>
      <div class="users-container">
        <div
          v-for="(user, index) in newFormInline.Users || []"
          :key="index"
          class="user-group"
        >
          <div class="user-inputs">
            <el-form-item
              :prop="`Users.${index}.Code1`"
              :rules="formRules.Code1"
              style="margin-bottom: 8px"
            >
              <el-input v-model="user.Code1" placeholder="请输入用户关联码" />
            </el-form-item>
            <el-input v-model="user.Name" placeholder="请输入用户名称" />
          </div>
          <el-button
            v-if="(newFormInline.Users?.length || 0) > 1"
            type="danger"
            :icon="Delete"
            size="small"
            circle
            class="delete-btn"
            @click="removeUser(index)"
          />
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<style scoped>
.users-container {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.user-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 8px;
}

.user-inputs {
  flex: 1;
}

.delete-btn {
  margin-top: 4px;
  flex-shrink: 0;
}

.avatar-uploader .avatar {
  display: block;
  width: 120px;
  height: 120px;
}
</style>

<style>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 120px;
  height: 120px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
